import React, { useMemo, Suspense, lazy } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider, Spin } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import { useAuth } from './context/AuthContext';

// 使用React.lazy懒加载组件
const Login = lazy(() => import('./pages/Login'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const WhatsAppConnect = lazy(() => import('./pages/WhatsAppConnect'));
const ChatPage = lazy(() => import('./pages/ChatPage'));
const NotFound = lazy(() => import('./pages/NotFound'));
const ChatsPage = lazy(() => import('./pages/ChatsPage'));

// 懒加载管理员页面
const AdminDashboard = lazy(() => import('./pages/Admin/AdminDashboard'));
const UserManagement = lazy(() => import('./pages/Admin/UserManagement'));
const PresetFileManagement = lazy(() => import('./pages/Admin/PresetFileManagement'));
const ActivityReport = lazy(() => import('./pages/Admin/ActivityReport'));
const CustomerManagement = lazy(() => import('./pages/CRM/CustomerManagement'));
const Settings = lazy(() => import('./pages/Admin/Settings'));

// 布局组件
const MainLayout = lazy(() => import('./components/layouts/MainLayout'));

// 加载状态组件
const LoadingFallback = () => (
  <div style={{ 
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center', 
    height: '100vh' 
  }}>
    <Spin size="large" tip="加载中..." />
  </div>
);

// 受保护的路由
const ProtectedRoute = ({ children, adminOnly = false }) => {
  const { user, isAuthenticated } = useAuth();
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  
  if (adminOnly && user?.role !== 'admin') {
    return <Navigate to="/dashboard" replace />;
  }
  
  return children;
};

function App() {
  // 使用useMemo缓存路由配置，防止不必要的重渲染
  const adminRoutes = useMemo(() => (
    <Route path="/admin/*" element={
      <ProtectedRoute adminOnly={true}>
        <MainLayout />
      </ProtectedRoute>
    }>
      <Route index element={<AdminDashboard />} />
      <Route path="users" element={<UserManagement />} />
      <Route path="preset-files" element={<PresetFileManagement />} />
      <Route path="activity-report" element={<ActivityReport />} />
      
      {/* 系统设置路由 */}
      <Route path="settings/*" element={<Settings />} />
    </Route>
  ), []);

  const mainRoutes = useMemo(() => (
    <Route path="/" element={
      <ProtectedRoute>
        <MainLayout />
      </ProtectedRoute>
    }>
      <Route index element={<Navigate to="/dashboard" replace />} />
      <Route path="dashboard" element={<Dashboard />} />
      <Route path="connect" element={<WhatsAppConnect />} />
      <Route path="chat/:contactId" element={<ChatPage />} />
      <Route path="chats" element={<ChatsPage />} />
      
      {/* CRM路由 */}
      <Route path="crm">
        <Route path="customers" element={<CustomerManagement />} />
      </Route>
    </Route>
  ), []);

  return (
    <ConfigProvider locale={zhCN}>
      <Suspense fallback={<LoadingFallback />}>
        <Routes>
          <Route path="/login" element={<Login />} />
          {mainRoutes}
          {adminRoutes}
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Suspense>
    </ConfigProvider>
  );
}

export default App; 